<template>
  <div class="layout-body-tabs" :class="heightFil?'height-fil':''">
    <div class="layout-body-tabs-nav">
      <div class="layout-body-tabs-nav-wrap">
        <div class="layout-body-tabs-nav-scroll">
          <div class="layout-body-tabs-nav-head">
            <template v-for="(item, index) in tabs" :key="index">
              <div
                class="layout-body-tabs-nav-head-item"
                :class="item.value == tabActive ? 'is-active' : ''"
                @click="selected(item)"
              >
                {{ item.name }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="layout-body-tabs-main">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "LayoutBodyTabs",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";
import { enumType } from "@/types";
const props = withDefaults(
  defineProps<{
    tabs?: enumType;
    modelValue?: number | string;
    heightFil?: boolean;
  }>(),
  {
    tabs: () => {
      return [];
    },
    modelValue: 0,
    heightFil: false,
  }
);

const emit = defineEmits(["update:modelValue", "change"]);

const tabActive = ref<number | string>(props.modelValue);

const selected = (item: { name: string; value: number | string }) => {
  tabActive.value = item.value
  emit("update:modelValue", item.value);
  emit("change", item.value, item);
};
</script>
<style scoped>
.layout-body-tabs {
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-bg-color-overlay);
  border-radius: 2px;
  /* height: calc(100% - 2px); */
}
.layout-body-tabs-main {
  padding: 20px;
  position: relative;
  /* height: calc(100% - 80px); */
  /* overflow-y: scroll; */
}
.layout-body-tabs.height-fil{
  height: calc(100% - 2px);
}
.layout-body-tabs.height-fil .layout-body-tabs-main {
  height: calc(100% - 80px);
  /* overflow-y: scroll; */
}
.layout-body-tabs-nav {
  background-color: var(--el-fill-color-lighter);
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin: 0;
  padding: 0;
  position: relative;
}
.layout-body-tabs-nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
}
.layout-body-tabs-nav-scroll {
  overflow: hidden;
}
.layout-body-tabs-nav-head {
  white-space: nowrap;
  position: relative;
  float: left;
  z-index: calc(var(--el-index-normal) + 1);
}
.layout-body-tabs-nav-head-item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  position: relative;
  user-select: none;
  cursor: pointer;
  transition: all var(--el-transition-duration)
    var(--el-transition-function-ease-in-out-bezier);
  border: 1px solid transparent;
  margin-top: -1px;
  color: var(--el-text-color-secondary);
}
.layout-body-tabs-nav-head-item.is-active {
  color: var(--base-default);
  background-color: #ffffff;
  border-right-color: var(--el-border-color-lighter);
  border-left-color: var(--el-border-color-lighter);
}
</style>